<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>绘制圆弧和圆</title>
</head>
<body>
<canvas id="canvas" width="1024" height="768"
        style="border: 1px solid #aaa; display: block;margin: 100px auto"></canvas>
<script>
  var canvas = document.getElementById('canvas')
  var context = canvas.getContext('2d')

  context.arc(300, 300, 50, 0, 1.5 * Math.PI, false)
  /*
  arc(圆心x, 圆心y, 半径, 起始位置, 结束位置, 是否逆时针):
      1.5PI
  PI -------> 0 (0的位置，也是2PI的位置)
      0.5PI
   */
  context.stroke()
  const colors = ['#55D4E9', '#88DBE9', '#05C9E9', '#9CE905', '#BDE965', '#BF0449', '#F2B705', '#D98E04', '#F25D07', '#D90D0D']
  for (var i = 1; i <= 10; i++) {
    context.beginPath()
    context.arc(40 + (i - 1) * 90, 500, 40, 0, 2 * Math.PI * i / 10);
    // context.closePath()  // 会自动把不闭合的路径用直线闭合
    context.stroke()
  }
  for (var i = 1; i <= 10; i++) {
    context.beginPath()
    context.arc(40 + (i - 1) * 90, 650, 40, 0, 2 * Math.PI * i / 10);
    // context.closePath()  // 会自动把不闭合的路径用直线闭合
    // context.fillStyle = '#6efa23'
    context.fillStyle = colors[Math.floor(Math.random() * colors.length)]
    context.fill()
  }
</script>
</body>
</html>
